<template>
  <div class="alert-box">
    <div class="fade"></div>
    <div class="address-group">
      <div class="head">
        <em class="close" @click.stop="colseBox($event)"></em>
        <div class="flex">
          <img class="border-1px" :src="goodsDetail.imageThumb">
          <div class="goods-info">
            <div class="flex"><em class="icon tag">自营</em><span class="goods-name text-ellipsis">{{goodsDetail.name || '商品名'}}</span></div>
            <!--<priceShow :price="goodsDetail.priceDisPiece"></priceShow>-->
            <div class="price"><em>￥</em>{{price | money}}/件</div>
          </div>
        </div>
      </div>
      <div class="address-list">
        <div class="item flex flex-align-center" v-for="item in addressList">
          <span class="icon flex-1 select" :class="{selected : item.isChecked}" :data-id="item.id" :data-num="item.num" @click="selectAddress(item)">
            {{item.provinceName + item.cityName + item.address | filterAddress}}
          </span>
          <div class="opts-num border-1px">
            <span class="border-right" @click="numMinus(item)">-</span>
            <input class="num flex-1 border-right" v-model.number="item.num" type="number" @input="inputChange(item)">
            <span @click="numPlus(item)">+</span>
          </div>
        </div>
        <div class="add" @click="addAddress">+ 建议收货地址</div>
      </div>
      <div class="opts flex">
        <div class="flex-1 bg-white select-all"><em class="icon select" :class="{selected : checkAll}" @click="selectAll">全选</em><i>({{checkedNum}} / {{addressList.length}})</i></div>
        <div class="flex-1 btn" :class="{active : checkedNum>0}"  @click="addPurchaseOrder(false)">确认采购 ￥<em>{{price*goodsNum | money}}</em></div>
      </div>
    </div>
  </div>
  <!--<div class="order-page">
    <headBar  isBack="show">
      <div slot="xm-header-center">
        <div class="xm-header-title">填写采购单</div>
      </div>
      <div slot="xm-header-right"></div>
    </headBar>
    <div class="select-all flex flex-pack-justify bg-white border-bottom " v-show="hasAddress">
      <div class="flex paddingLeft10"><input type="checkbox" class="select icon" checked @click="selectAll" ref="selectAll"> <span>全选</span></div>
      <router-link to="/address/list">管理收货地址</router-link>
    </div>
    <div class="cate-group goods-group flex border-bottom padding5" >
      <div class="group-left">
        <img :src="goodsDetail.imageThumb">
      </div>
      <div class="group-right flex-1">
        <h3>{{goodsDetail.name || '商品名'}}</h3>
        <div class="flex flex-pack-justify flex-align-center rb">
          <div>
            <p>批发价：<price :priceUnit="price" unitName="件" ></price></p>
          </div>
        </div>
      </div>
    </div>
    <div v-for="item in addressList" class="bg-white paddingLeft10 marginTop20 flex">
      <div class="select-group ">
        <input type="checkbox" class="icon select-1" :data-id="item.id" checked :data-num="item.num" @click="compute">
      </div>
      <div class="order-group marginTop0 flex-1" >
        <div class="flex flex-pack-justify consignee-info">
          <div>收货人：{{item.contactor || '收货人'}}</div>
          <div>{{item.phone || '联系电话'}}</div>
        </div>
        <p class="address-info border-bottom">收货地址：{{item.provinceName + item.cityName + item.address | filterAddress}}</p>
        <div class="opts opts-num flex flex-pack-justify marginTop0">
          <div >商品数量</div>
          <div class="border-1px flex">
            <span class="opt font4" @click="numMinus(item)">-</span>
            <input class="num" v-model.number="item.num" type="number" @input="inputChange(item)">
            <span class="opt font4" @click="numPlus(item)">+</span>
          </div>
        </div>
      </div>
    </div>
    <div  class="addAddress bg-white marginTop20 text-center" v-show="!hasAddress"  @click="addAddress">
      添加收货地址
    </div>
    <div class="foot-blank"></div>
    <div class="opt-group flex border-top border-bottom">
      <p class="total-money price flex-1">总金额：
        <price :priceUnit="price*goodsNum" unitName=""></price>
        &lt;!&ndash;<span class="color-1">￥</span> <i class="color-1">{{price*goodsNum | money}}</i></p>&ndash;&gt;
      <div class="pay btn4 bg-gray" @click="addPurchaseOrder(true)">继续购物</div>
      <div class="pay btn3" @click="addPurchaseOrder(false)">去结算</div>
    </div>
    <xm-loading v-show="loading"></xm-loading>
  </div>-->
</template>
<script>

  export default {
    props: {
        goodsId:{
            default:''
        },
        goodsDetail:[],
        price:'',
        isAddPurchase:''
    },
    data() {
      return {
        loading: true,
        goodsId: '',
//        goodsDetail: {},
        addressList: [],
        hasAddress: false,
        price: 0, //商品价格
        goodsNum: 0, //购买商品数量
        checkAll:true,
        checkedNum:0,
        selects: []
      };
    },
    methods: {
      colseBox(el) {
          this.$emit('colseBox',el)
      },
      ////获取商品详情
//      getWareDetail(){
//        getWareDetail({id: this.goodsId}).then(data=>{
//          if(data.returnCode == '000000'){
//            this.goodsDetail = data.result;
//            this.price = this.goodsDetail.priceDisPiece || this.goodsDetail.pricePiece;
//            this.getAddressList();
//          }
//        })
//      },
      //获取地址列表
      getAddressList(){
          getAddressList().then(data=>{
              this.loading = false;
              if(data.returnCode == '000000'){
                  this.addressList = data.result.buyerAddressList;
                  this.hasAddress = this.addressList.length > 0;
                  [].forEach.call(this.addressList, item =>{
                      this.$set(item,'isChecked',true);
                      console.log(this.goodsDetail)
                      this.$set(item, 'num',  this.goodsDetail.numberWholesale || 1);
                  });
                  setTimeout(()=>{
                      this.compute();
                  }, 20);
              }
          })
      },
      numMinus(item){
        if(!item.num){
          this.$set(item, 'num',1 );
        }
        if(item.num > (this.goodsDetail.numberWholesale || 1)){
          item.num--;
          this.$set(item, 'num',item.num);
        }
        this.$nextTick(()=>{
          this.compute();
        })
      },
      numPlus(item){
        if(!item.num){
          this.$set(item, 'num', 1);
        }
        item.num++;
        if(item.num > 9999){
          item.num = 9999;
        }
        this.$set(item, 'num', item.num);
        this.$nextTick(()=>{
          this.compute();
        })
      },
      //全部选中
      selectAll(){
          this.checkAll=!this.checkAll;
          [].forEach.call(this.addressList, (select)=>{
              select.isChecked = this.checkAll;
          });
          this.compute();
      },
      //勾选单个地址
       selectAddress(el){
           el.isChecked=!el.isChecked;
            this.isCheckedAll();
           this.compute();
       },
      //计算商品数量
      compute(){
        var checkedArr=[];
        this.checkedNum=0;
        this.goodsNum = 0;
        [].forEach.call(this.addressList, (select)=>{
          if(select.isChecked){
            checkedArr.push(select);
            this.checkedNum+=1;
            this.goodsNum += parseInt(select.num) || 1;
          }
        });
        if(checkedArr.length<this.addressList.length){
            this.checkAll=false;
        }else {
            this.checkAll=true;
        }
      },
      /*全选是否选中*/
      isCheckedAll(){
          var checkedArr=[];
          [].forEach.call(this.addressList, (select)=>{
              if(select.isChecked){
                  checkedArr.push(select);
              }
          });
          if(checkedArr.length<this.addressList.length){
              this.checkAll=false;
          }else {
              this.checkAll=true;
          }
      },
      /**
       * 添加订单
       * @param <bool> 是否继续购物 ，true 继续购物
       * */
      addPurchaseOrder(bool){
        let receivingList = [];
        [].forEach.call(this.addressList, (select)=> {
          if (select.isChecked) {
            let receivingId = select.id;
            let num = select.num || 1;
            receivingList.push({receivingId: receivingId, number: num });
          }
        })
        if(bool && receivingList.length == 0){
          this.$router.push({name: 'goodsList'});
          return;
        }
        if(receivingList.length == 0){
          Toast('收货地址不能为空');
          return;
        }
        let params = {
          wareId: this.goodsId,
          receivingList: receivingList
        }
        addPurchaseOrder(params).then(data=>{
          if(data.returnCode == '000000'){
            if(bool){
              history.back();
            }else{
              this.$router.push({name: 'purchaseList'});
            }
          }else{
            Toast(data.errorMsg);
          }
        })
      },
      //添加收货地址
      addAddress(){
        this.$parent.isAddPurchase=false;
        this.$parent.isShowAddr=true;
//        this.$router.push({name: 'addressAdd'});
      },
      inputChange(item){
        if(item.num<0){
          this.$set(item, 'num', 1);
        }else if(item.num > 9999){
          this.$set(item, 'num', 9999);
        }
      }
    },
    filters: {},
    created() {
//      this.goodsId = this.$route.params['goodId'];
//      this.getWareDetail();
        var _this=this;
        setTimeout(function () {
            console.log(_this.$parent.goodsDetail)
        },800);
        this.getAddressList();
    },
    mounted(){

    },
    components: {
    }
  };
</script>
<style lang="less">
  /*@import "../goods/detail.less";*/
</style>
<style>
  .alert-box{
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    z-index: 10000;
  }
</style>
